<template>
  <div class="container">
    <div class="content">
        <el-collapse v-model="activeNames1">
        <el-collapse-item  name="1">
          <template slot="title">
           <div style="text-align:left">基础信息</div><div class="more"></div>
          </template>
          <div class="items">
            <div class="item">
                <p class="title">货主编号</p>
                <span class="info">{{renderinfo.code}}</span>
            </div>
            <div class="item">
                <p class="title">货主名称</p>
                <span class="info">{{renderinfo.name}}</span>
            </div>
            <div class="item">
                <p class="title">联系人</p>
                <span class="info">{{renderinfo.personName}}</span>
            </div>
            <div class="item">
                <p class="title">联系电话</p>
                <span class="info">{{renderinfo.phone}}</span>
            </div>
          </div>
          <div class="items">
            <div class="item">
                <p class="title">联系人邮箱</p>
                <span class="info">{{renderinfo.email}}</span>
            </div>
            <div class="item">
                <p class="title">省/市/区</p>
                <span class="info">{{renderinfo.location}}</span>
            </div>
            <div class="width100">
                <p class="title">详细地址</p>
                <span class="info">{{renderinfo.address}}</span>
            </div>
          </div>
          <div class="items">
            <div class="width100">
                <p class="title">备注</p>
                <span class="info">{{renderinfo.remark}}</span>
            </div>
          </div>
        </el-collapse-item>
        </el-collapse>
    </div>
    <div class="content sec">
        <el-collapse v-model="activeNames2">
        <el-collapse-item  name="1">
          <template slot="title">
           <div style="text-align:left">库位信息</div><div class="more"></div>
          </template>
          <div style="border:1px orange solid;display:inline-block;background:#fff9eb;margin:10px 10px">总计:  {{this.tableData.records?.length}}个库位{{this.renderinfo?.goodsTotal}}个货品</div>
    <div class="form">
      <el-table :data="tableData.records" border :cell-style="{padding: '0',height:'44px'}" max-height="400" >
        <el-table-column align="center" type="index" label="序号" width="50" max-height="44"/>
        <el-table-column align="center" prop="warehouseName" label="仓库名称" min-width="150"/>
        <el-table-column align="center" prop="areaName" label="库区名称" min-width="150"/>
        <el-table-column align="center" prop="locationCode"  label="库位编号" min-width="199"/>
        <el-table-column align="center" prop="locationName" label="库位名称" min-width="150"/>
      </el-table>
        <!-- 分页组件 -->
        <PageTool
        :total="tableData.total"
        :paginationPage="tableData.current"
        :paginationPagesize="tableData.size"
        @pageSizeChange="pageSizeChange"
        @pageChange="pageChange"
        style="height:60px ;margin-top:10px;text-align:center"
        />
    </div>
        </el-collapse-item>
        </el-collapse>
    </div>
  </div>
</template>

<script>
import { detailinfo, getlocationinfo } from '@/api/goods-owner'
export default {
  name: 'goods-owner-detail',
  data () {
    return {
      activeNames1: '1',
      activeNames2: '0',
      renderinfo: {},
      tableData: {},
      search: { id: '', size: 10, current: 1, ownerId: '' }
    }
  },
  created () {
    this.search.ownerId = this.$route.params.id
    this.detailinfo()
    this.getlocationinfo()
  },
  methods: {
    async detailinfo () { // 货主信息
      const { data } = await detailinfo(this.search.ownerId)
      console.log(data)
      this.renderinfo = data
    },
    async getlocationinfo () { // 货主的库位信息
      const { data } = await getlocationinfo(this.search)
      this.tableData = data
    },
    pageSizeChange (size) {
      this.search.size = size
      this.getlocationinfo()
    },
    pageChange (page) {
      this.search.current = page
      this.getlocationinfo()
    }
  }

}
</script>

<style lang="less" scoped>
.container {
  .sec{
    margin-top:20px
  }
  .content{
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px  10px gray;
  }
  .el-collapse-item.is-active{
    background-color: #fff;
    border-radius: 10px;
    // box-shadow: 3px 3px  10px gray;
    // background-color: pink;
    width: 100%;
    flex: 1;
  }
  .el-collapse{
    width: 99%;
  }
  /deep/ .el-collapse-item{
    flex: 1;
    padding: 25px;
    .el-collapse-item__header:hover{
      color: orange;
    }
    .el-collapse-item__header{
      position: relative;
      >i{
        margin-left: 990px !important;
      }
      .more{
        position: absolute;
        right: 0px !important;
        top: -5px;
      }
      .more::after{
        content:'展开'
      }

    }
   .el-collapse-item__header.is-active{
      position: relative;
      >i{
        margin-left: 1000px;
      }
      .more{
        position: absolute;
        right: -20px;
        top: -5px;
      }
      .more::after{
        content:'收起'
      }

    }
    .el-collapse-item__arrow.el-icon-arrow-right::after{
    color: red;
    }
    .el-collapse-item__arrow.el-icon-arrow-right{
      width: 20px;
      height: 20px;
      content:'更多'
    }
    .items{
      background-color: #fdfcf9;
      display: flex;
      flex-wrap: wrap;
      .width100{
        flex: 1;
        margin-top:10px;
        padding: 0  20px;
        height: 46px;
      }
      .item{
        margin-top:10px;
        padding: 0  20px;
        height: 46px;
        width:25%;
       p{
          font-size: 13px;
          color: #887e7e;
        }
        span{
           font-size: 13px;
          color: #332929;
        }
      }
    }
  }
/deep/.form{
  th{
    background-color: #fff9eb;
  }
}
}

</style>
